<template>
  <div class="v-eqpt-list-add">
    <c-row-crumb :title="multLang('btn_new_a', 'title_asset_i')">
      <el-button @click="clearForm">{{ multLang('btn_clear_a') }}</el-button>
      <el-button type="primary" plain @click="submit(true)">
        {{ multLang('保存并返回') }}
      </el-button>
      <el-button type="primary" @click="submit()">
        {{ multLang('btn_save_a') }}
      </el-button>
    </c-row-crumb>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="140px"
      :validate-on-rule-change="false"
    >
      <c-row-add single>
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_asset_a', ':')"
              prop="asset_name"
            >
              <el-input
                v-model="form.asset_name"
                :placeholder="multLang('text_d')"
              ></el-input>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_asset_ae', ':')"
              prop="asset_code"
            >
              <el-input
                v-model="form.asset_code"
                :placeholder="multLang('text_d')"
              ></el-input>
            </el-form-item>
          </c-col>
        </c-row>
      </c-row-add>
      <c-row-add :title="multLang('tab_info_a')">
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_asset_c', ':')"
              prop="category_id"
            >
              <c-cascader
                v-model="form.category_id"
                :options="assetTypeAllTree"
                :placeholder="tplLang('text_choose_a', ['title_asset_c'])"
                @change="assetTypeChange"
              ></c-cascader>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_asset_d', ':')"
              prop="asset_model_id"
            >
              <c-select
                v-model="form.asset_model_id"
                :options="equipmentModelList"
                :placeholder="tplLang('text_choose_a', ['title_asset_d'])"
              ></c-select>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_loca_a', ':')"
              prop="position_code"
            >
              <c-cascader
                v-model="form.position_code"
                :options="assetPositionPermissionTree"
                :placeholder="tplLang('text_choose_a', ['title_loca_a'])"
              ></c-cascader>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_level_a', ':')"
              prop="importment_level_id"
            >
              <c-select
                v-model="form.importment_level_id"
                :options="levelList"
                :placeholder="tplLang('text_choose_a', ['title_level_a'])"
              ></c-select>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_date_a', ':')"
              prop="enable_time"
            >
              <c-date-picker
                v-model="form.enable_time"
                :placeholder="tplLang('text_choose_a', ['title_date_a'])"
              >
              </c-date-picker>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_use_a', '(', 'title_an_d', ')', ':')"
              prop="use_year"
            >
              <el-input
                v-model="form.use_year"
                :placeholder="multLang('text_d')"
              ></el-input>
            </el-form-item>
          </c-col>
          <c-col :col="11">
            <el-form-item :label="multLang('title_note_a', ':')" prop="remark">
              <c-input-text v-model="form.remark"></c-input-text>
            </el-form-item>
          </c-col>
        </c-row>
      </c-row-add>
      <c-row-add :title="multLang('title_ba_v')">
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_date_b', ':')"
              prop="buy_date"
            >
              <c-date-picker
                v-model="form.buy_date"
                :placeholder="tplLang('text_choose_a', ['title_date_b'])"
              >
              </c-date-picker>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_supplier_a', ':')"
              prop="supplier_id"
            >
              <c-select
                v-model="form.supplier_id"
                :options="customerList"
                :placeholder="tplLang('text_choose_a', ['title_supplier_a'])"
              ></c-select>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_mfr_a', ':')"
              prop="manufacturer_id"
            >
              <c-select
                v-model="form.manufacturer_id"
                :options="manufacturerList"
                :placeholder="tplLang('text_choose_a', ['title_mfr_a'])"
              ></c-select>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_tax_a', '(%):')"
              prop="tax_rate"
            >
              <el-input
                v-model="form.tax_rate"
                :placeholder="multLang('text_d')"
                @blur="handleTaxation('tax_rate', 100)"
              ></el-input>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_price_a', ':')" prop="price">
              <el-input
                v-model="form.price"
                :placeholder="multLang('text_d')"
                @blur="handleTaxation('price')"
              >
                <c-select
                  slot="prepend"
                  v-model="form.buy_currency_id"
                  :options="currencyList"
                ></c-select>
              </el-input>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_tax_b', ':')"
              prop="tax_price"
            >
              <el-input
                v-model="form.tax_price"
                :placeholder="multLang('text_d')"
                @blur="toNumber('tax_price')"
              >
                <c-select
                  slot="prepend"
                  v-model="form.buy_currency_id"
                  :options="currencyList"
                ></c-select>
              </el-input>
            </el-form-item>
          </c-col>
        </c-row>
      </c-row-add>

      <c-row-add :title="multLang('title_aaaab_f')">
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_install_b', ':')"
              prop="install_date"
            >
              <c-date-picker
                v-model="form.install_date"
                :placeholder="tplLang('text_choose_a', ['title_install_b'])"
              >
              </c-date-picker>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_price_b', ':')"
              prop="install_price"
            >
              <el-input
                v-model="form.install_price"
                :placeholder="multLang('text_d')"
                @blur="toNumber('install_price')"
              >
                <c-select
                  slot="prepend"
                  v-model="form.install_currency_id"
                  :options="currencyList"
                ></c-select>
              </el-input>
            </el-form-item>
          </c-col>
        </c-row>
      </c-row-add>
    </el-form>
  </div>
</template>
<script>
import { addAsset } from '@api/eqpt'
import { normalData } from '@/util/data'
export default {
  name: 'VEqptListAdd',
  components: {},
  props: {},
  data() {
    return {
      positionCodeTree: [],
      equipmentModelList: [],
      form: {
        asset_name: '',
        asset_code: '',
        category_id: '',
        asset_model_id: '',
        position_code: '',
        importment_level_id: '',
        enable_time: '',
        use_year: '',
        remark: '',
        buy_date: '',
        supplier_id: '',
        manufacturer_id: '',
        tax_rate: '',
        price: '',
        tax_price: '',
        install_date: '',
        install_price: '',
        buy_currency_id: '',
        install_currency_id: ''
      }
    }
  },
  computed: {
    assetTypeAllTree() {
      return this.optionTree('asset_type_all')
    },
    customerList() {
      return this.optionList('customer')
    },
    levelList() {
      return this.optionList('level')
    },
    manufacturerList() {
      return this.optionList('manufacturer')
    },
    currencyList() {
      return this.optionList('currency')
    },
    assetPositionPermissionTree() {
      return this.optionTree('asset_position_permission')
    },
    rules() {
      return {
        asset_code: {
          required: true,
          message: this.multLang('title_asset_ae', 'msg_g'),
          trigger: 'blur'
        },
        asset_name: {
          required: true,
          message: this.multLang('title_asset_a', 'msg_g'),
          trigger: 'blur'
        },
        position_code: {
          required: true,
          message: this.multLang('title_loca_a', 'msg_g'),
          trigger: 'change'
        },
        asset_model_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_asset_d']),
          trigger: 'change'
        },
        category_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_asset_c']),
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    assetModelAllList() {
      this.form.asset_model_id = ''
    }
  },
  beforeCreate() {},
  created() {
    this.setOption({ key: 'asset_type_all' })
    this.setOption({ key: 'customer' })
    this.setOption({ key: 'level' })
    this.setOption({ key: 'manufacturer' })
    this.setOption({ key: 'currency' }).then(() => {
      const val = this.currencyList[0].value
      this.form.buy_currency_id = val
      this.form.install_currency_id = val
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.setOption({ key: 'asset_position_permission' })
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    handleTaxation(...args) {
      this.toNumber(...args)
      const { tax_rate, price } = this.form
      if (tax_rate && price) {
        this.form.tax_price = (tax_rate * price) / 100
        this.toNumber('tax_price')
      }
    },
    toNumber(name, max) {
      const num = max && this.form[name] > max ? max : this.form[name]
      const val = Math.round(num * 100) / 100
      this.form[name] = val ? val.toFixed(2) : ''
    },
    clearForm() {
      this.$refs.form.resetFields()
    },
    submit(back) {
      this.$refs.form.validate(
        valid =>
          valid &&
          addAsset({
            ...this.form
          }).then(({ code }) => code === 200 && back && this.$router.back())
      )
    },
    assetTypeChange(id) {
      this.form.asset_model_id = ''
      this.setOption({
        key: 'asset_model_category',
        out: true,
        option: {
          id
        }
      }).then(data => {
        this.equipmentModelList = normalData(data || [])
      })
    }
  }
}
</script>
<style lang="scss"></style>
